<template>
  <div>
    <div class="bg_grey_all"></div>
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >工作详情</van-col
      >
      <van-col span="8"></van-col>
    </van-row>

    <van-row class="topMargin">
      <van-col span="24">
        <van-cell-group>
          <van-cell class="cell">
            <template slot="title">
              <van-tag type="primary" size="large" v-if="work.type === 1"
                >常</van-tag
              >
              <van-tag
                size="large"
                color="#0099CC"
                v-if="work.type === 2 && work.sub_type === 1"
                >日</van-tag
              >
              <van-tag
                size="large"
                color="#0099CC"
                v-if="work.type === 2 && work.sub_type === 2"
                >周</van-tag
              >
              <van-tag
                size="large"
                color="#0099CC"
                v-if="work.type === 2 && work.sub_type === 3"
                >月</van-tag
              >
              <van-tag
                size="large"
                color="#0099CC"
                v-if="work.type === 2 && work.sub_type === 4"
                >季</van-tag
              >
              <van-tag
                size="large"
                color="#0099CC"
                v-if="work.type === 2 && work.sub_type === 5"
                >年</van-tag
              >
              <van-tag size="large" color="#7232dd" v-if="work.type === 3"
                >会</van-tag
              >
              <van-tag size="large" color="#FF6600" v-if="work.type === 4"
                >考</van-tag
              >
              <van-tag size="large" color="#999900" v-if="work.type === 5"
                >培</van-tag
              >
              <span class="custom-title">{{ work.title }}</span>
            </template>
            <template #label>
              <div>截止: {{ end_time }}</div>
            </template>
          </van-cell>

          <van-cell size="small" class="bg_grey" />

          <!-- 工作描述 -->
          <div
            v-if="
              (work.type === 1 || work.type === 2 || work.type === 4) &&
              isNotEmpty(work.source.jobContent)
            "
          >
            <van-cell
              value="工作描述"
              style="font-size: 16px; font-weight: bold"
            />
            <van-cell :title="work.source.jobContent" />
          </div>

          <div
            v-else-if="
              work.type === 3 && isNotEmpty(work.source.meetingContent)
            "
          >
            <van-cell
              value="工作描述"
              style="font-size: 16px; font-weight: bold"
            />
            <van-cell :title="work.source.meetingContent" />
          </div>

          <div
            v-else-if="
              work.type === 5 && isNotEmpty(work.source.trainingContent)
            "
          >
            <van-cell
              value="工作描述"
              style="font-size: 16px; font-weight: bold"
            />
            <van-cell :title="work.source.trainingContent" />
          </div>

          <!-- 工作事项 -->
          <div v-if="work.type !== 4 && isNotEmpty(work.source.requestItems)">
            <van-cell size="small" class="bg_grey" />
            <div>
              <van-cell
                value="工作事项"
                style="font-size: 16px; font-weight: bold"
              />
              <van-cell
                v-for="(item, index) in work.source.requestItems"
                :key="item.id"
                :value="index + 1 + ': ' + item.name"
              />
            </div>
          </div>

          <!-- 附件下载 -->
          <div v-if="work.type !== 4 && isNotEmpty(work.source.attachmentList)">
            <van-cell size="small" class="bg_grey" />
            <div>
              <van-cell
                value="附件下载"
                style="font-size: 16px; font-weight: bold"
              />
              <van-cell
                v-for="item in work.source.attachmentList"
                :key="item.id"
              >
                <template #title>
                  <div>
                    <a :href="baseUri + item.file_path" target="_blank"
                      >{{ item.upload_name }}
                    </a>
                  </div>
                </template>
              </van-cell>
            </div>
          </div>

          <!-- 工作结果 -->
          <div v-if="work.type !== 4">
            <van-cell size="small" class="bg_grey" />
            <div>
              <van-cell
                value="工作结果"
                style="font-size: 16px; font-weight: bold"
              />
              <van-cell value="工作结果">
                <van-field
                  v-model="workResult.result"
                  rows="5"
                  autosize
                  type="textarea"
                  maxlength="200"
                  placeholder="请输入工作结果"
                  show-word-limit
                />
              </van-cell>
            </div>
          </div>

          <!-- 备注说明 -->
          <div v-if="work.type !== 4">
            <van-cell size="small" class="bg_grey" />
            <div>
              <van-cell
                value="备注说明"
                style="font-size: 16px; font-weight: bold"
              />
              <van-cell value="备注说明">
                <van-field
                  v-model="workResult.memo"
                  rows="5"
                  autosize
                  type="textarea"
                  maxlength="200"
                  placeholder="请输入文字"
                  show-word-limit
                />
              </van-cell>
            </div>
          </div>
          <!-- 上传附件 -->
          <div v-if="work.type !== 4 && $store.state.work_status !== 2 ">
            <van-cell size="small" class="bg_grey" />
            <div>
              <van-cell
                value="上传附件"
                style="font-size: 16px; font-weight: bold"
              />
              <van-cell value="上传附件">
                <!-- <van-uploader
                  multiple
                  :max-size="1024 * 1024 * 5"
                  v-model="fileList"
                  :before-read="beforeRead"
                  :after-read="afterRead"
                  @oversize="onOversize"
                /> -->
                <a href="javascript:;" class="file"
                  >选择文件
                  <input
                    id="upload_file"
                    type="file"
                    multiple
                    @change="selectFile"
                  />
                </a>
              </van-cell>
              <van-cell
                value="文件列表"
                style="font-size: 14px; font-weight: bold"
              />
              <van-cell v-for="file in this.fileList" :key="file.uid"
                >{{ file.name }}
              </van-cell>

              <van-cell>
                <a @click="upLoad()" href="javascript:;" class="file"
                  >上传文件
                </a>
              </van-cell>
            </div>
          </div>
          <!-- 考试信箱 -->
          <div v-if="work.type === 4">
            <van-cell size="small" class="bg_grey" />
            <div>
              <van-cell
                value="考试信息"
                style="font-size: 16px; font-weight: bold"
              />
              <van-cell>
                <p>截止时间：{{ end_time }}</p>
                <p>通过标准：{{ work.source.passingScore }} 分</p>
              </van-cell>
              <van-cell is-link @click="toExam">
                <template slot="title">
                  <span style="color: #0099cc">进入考试</span>
                </template>
              </van-cell>
            </div>
          </div>
          <van-cell size="large" class="bg_grey" />
          <van-cell size="large" class="bg_grey" />
        </van-cell-group>
      </van-col>
    </van-row>
    <div v-show="work.type !== 4 && $store.state.work_status !== 2 " class="bg_grey" style="text-align: center">
      <van-button
        
        style="width: 100px"
        square
        type="primary"
        size="small"
        @click="submitWork"
        >确认工作完成</van-button
      >
    </div>
    <van-cell size="large" class="bg_grey" />
  </div>
</template>

<script>
import { Toast } from "vant";
import { base_uri, Api } from "../../../api/api_config";
import { WorkResult, WorkResultFile } from "../../../model/work";

export default {
  data() {
    return {
      active: 0,
      work: {},
      end_time: "",
      baseUri: "",
      workResult: {},
      fileList: [],
      formData: null,
      workResultFile: []
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.$store.state.tab_show = false;
      // 获取work对象
      this.work = this.$store.state.work;
      console.log(this.work);
      this.end_time = this.work.date.format();
      this.baseUri = base_uri;

      // 提交对象
      this.workResult = new WorkResult();
    },
    back() {
      this.$store.state.tab_show = true;
      this.$router.push("/work");
    },
    onOversize(file) {
      console.log(file);
      Toast("文件大小不能超过 500kb");
    },
    toExam() {
      this.$router.push("/work/examInfo");
    },
    isNotEmpty(prop) {
      return prop !== null && prop !== undefined && prop.length > 0;
    },
    submitWork() {
      let that = this
      let param = this.getUrl()
      this.$axios({
        method: param.method,
        url: param.url,
        data: this.workResult
      })
        .then(function (res) {
          Toast.success('提交成功');
          that.back()
          console.log(res);
        })
        .catch(function (e) {
          console.log(e);
        });
    },
    getUrl() {
      let url = "";
      let method = "";

      this.workResultFile.forEach(element => {
        this.workResult.fileList.push(element)
      });
      this.workResult.userid = this.$store.state.configuration.currentUser.id
      
      switch (this.work.type) {
        case 1:
          method = Api.routine.complete.method
          url = Api.routine.complete.url
          this.workResult.id = this.work.id
          break;
        case 2:
          method = Api.period.complete.method
          url = Api.period.complete.url
          this.workResult.id = this.work.id
          break;
        case 3:
          method = Api.meeting.complete.method;
          url = Api.meeting.complete.url;
          this.workResult.meetingid = this.work.id
          break;
        case 5:
          method = Api.training.complete.method;
          url = Api.training.complete.url;
          this.workResult.id = this.work.id
          break;
        default:
          break;
      }
      return {
        url: url,
        method: method
      };
    },
    selectFile(e) {
      let files = e.target.files;
      files.forEach((element) => {
        this.fileList.push({ name: element.name, file: element });
      });
    },
    upLoad() {
      this.formData = new FormData();
      // formData重复的往一个值添加数据并不会被覆盖掉，可以全部接收到，可以通过formData.getAll('files')来查看所有插入的数据
      for (let i = 0; i < this.fileList.length; i++) {
        this.formData.append("files", this.fileList[i].file);
      }

      let that = this;

      this.$axios({
            method: Api.file.upload.method,
            url: Api.file.upload.url,
            data: this.formData
          })
        .then(function (response) {
          response.data.forEach(element => {
            let wrf = new WorkResultFile()
            wrf.id = element.id
            that.workResultFile.push(wrf)
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  },
};
</script>

<style scoped>
.custom-title {
  font-size: 18px;
  margin-left: 20px;
}

.file {
  position: relative;
  display: inline-block;
  background: #d0eeff;
  border: 1px solid #99d3f5;
  border-radius: 4px;
  padding: 4px 12px;
  overflow: hidden;
  color: #1e88c7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
}
.file input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
.file:hover {
  background: #aadffd;
  border-color: #78c3f3;
  color: #004974;
  text-decoration: none;
}
</style>
